<template>
    <grid-layout class="gridLayout"
                 :layout.sync="layout"
                 :col-num="1"
                 :row-height="rowHeight"
                 :is-draggable="true"
                 :is-resizable="false"
                 :vertical-compact="true"
                 :margin="[0, 5]"
                 :use-css-transforms="false" >
       <grid-item v-for="layoutItem in layout" class="gridItem" :class="[activeLayoutIndex == layoutItem.i ? activeClass : '']"
        :x="layoutItem.x"
        :y="layoutItem.y"
        :w="layoutItem.w"
        :h="layoutItem.h"
        :i="layoutItem.i"
        :key="layoutItem.i">
        <div class="itemContent" @click= "active(layoutItem.i)"
             v-bind:style="{ 'background': getBackground }"
             @contextmenu.prevent="onContextmenu(layoutItem.i,$event)">
           <grid-layout class="gridlayout"
                 :layout.sync="layoutItem.SlideContent"
                 :col-num="18"
                 :row-height="insideRowHeight"
                 :is-draggable="false"
                 :is-resizable="false"
                 :vertical-compact="false"
                 :preventCollision="false"
                 :margin="[0, 5]"
                 :use-css-transforms="false"
                 style="width:100%;height:100%">
              <grid-item v-for="item in layoutItem.SlideContent" class="insideGridItem"
               :x="item.x"
               :y="item.y"
               :w="item.w"
               :h="item.h"
               :i="item.i"
               :key="item.i">
               <div class="insideContent" style="height:100%" v-bind:style="{ 'border-width': item.itemBorder.width  + 'px', 'border-style': item.itemBorder.type, 'border-color': item.itemBorder.color, 'border-radius': item.itemBorder.radius + 'px', 'box-sizing': 'border-box' }">
                    <show  :itemContent="item.itemContent"></show>
               </div>
              </grid-item>
            </grid-layout>
        </div>
       </grid-item>
    </grid-layout>
</template>
<script>
import Show from '@/components/Show/Show.vue'

export default {
  data () {
    return {
      activeClass: 'active'
    }
  },
  computed: {
    layout () {
      return this.$store.state.layout
    },
    rowHeight () {
      return this.$store.state.split * 120
    },
    insideRowHeight () {
      return this.$store.state.split * 120
    },
    activeLayoutIndex () {
      return this.$store.state.activeLayoutIndex
    },
    activeArrayIndex () {
      return this.$store.state.activeArrayIndex
    },
    getBackground () {
      return this.$store.getters.getBackground
    }
  },
  methods: {
    active (i) {
      this.$store.commit('updateActiveLayoutIndex', i)
    },
    createSlide () {
      this.$store.commit('addSlide')
      this.$store.commit('addMaxNum')
      this.$store.commit('updateActiveLayoutIndex', this.$store.state.maxNum - 1)
    },
    copySlide () {
      this.$store.commit('copySlide')
      this.$store.commit('addMaxNum')
      this.$store.commit('updateActiveLayoutIndex', this.$store.state.maxNum - 1)
    },
    deleteSlide (i) {
      const deleY = this.layout[this.activeArrayIndex].y
      const prevY = this.layout[this.activeArrayIndex].y - 5
      var index
      if (deleY !== 0) {
        this.$store.commit('deleteSlide', this.activeArrayIndex)
        index = this.layout.filter(function (currentValue) {
          return currentValue.y === prevY
        })[0].i
        this.$store.commit('updateActiveLayoutIndex', index)
      } else {
        this.$message({
          message: '请保留首张幻灯片',
          type: 'warning'
        })
      }
    },
    onContextmenu (i, event) {
      this.active(i)
      this.$contextmenu({
        items: [
          {
            label: '新建幻灯片',
            icon: 'el-icon-postcard',
            divided: true,
            onClick: () => {
              this.createSlide()
            }
          },
          {
            label: '复制幻灯片',
            icon: 'el-icon-document-copy',
            divided: true,
            onClick: () => {
              console.log('复制')
              this.copySlide()
            }
          },
          {
            label: '删除幻灯片',
            icon: 'el-icon-delete',
            divided: true,
            onClick: () => {
              this.deleteSlide(i)
            }
          }
        ],
        event,
        // x: event.clientX,
        // y: event.clientY,
        customClass: 'class-a',
        zIndex: 300,
        minWidth: 100
      })
      return false
    }
  },
  mounted () {
  },
  watch: {
    layout: {
      deep: true,
      handler (v) {
        console.log('layout改变了')
      }
    },
    activeLayoutIndex (val) {
      const index = this.layout.indexOf(this.layout.filter(function (currentValue) {
        return currentValue.i === val
      })[0])
      this.$store.commit('updateActiveArrayIndex', index)
    },
    activeArrayIndex (val) {
      var index
      if (this.layout[val].SlideContent.length > 0) {
        index = this.layout[val].SlideContent[0].i
      } else { index = -1 }
      console.log('activeArrayIndex变化了')
      this.$store.commit('updateInsideActiveLayoutIndex', index)
    }
  },
  components: {
    Show
  }
}
</script>

<style scoped>
    .gridLayout {
      background-color: rgb(230,230,230);
      margin:0px 1px;
      display:block;
    }
    .gridItem {
        background-color: rgb(255, 255, 255);
        /* border: 1px solid rgb(198,198,198); */
        box-shadow: 1px 1px 2px #888888;
    }
    .gridItem:hover {
        padding:0px;
        /* border: 1px solid rgb(221, 104, 172); */
        outline: 1px solid rgba(221, 83, 115, 0.705);
    }
    .active,.active:hover{
      padding:0px;
      outline: 2px solid rgb(230, 28, 78);
    }
    .itemContent {
      width:400%;
      height:400%;
      background-color: greenyellow;
      transform: scale(0.25);
      transform-origin: 0 0
    }
</style>
